@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

.web{
	scroll-behavior: smooth;
	main{
		a:hover{
			cursor: pointer;
		}
		perspective: 3px;
		
		
		.bg{
			background-size: cover;
			// width: 100vw;
			width: 100%;
			height: 100%;
			z-index: -2;
			background-attachment: fixed;
			// background-image: url("../images/2.jpg");
			position: absolute;
		}	
		.top{
			
			.imgBox{
				width: 77vw;
				height: 39vw;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
				z-index: -2;
				img{
					width: 100%;
				}
			}
			.conTop{
				width: 20vw;
				margin: 0 auto;
				margin-top: -27vw;
				h2{
					font-size: 4vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: white;
					padding-bottom: 3vw;
					text-align: center;
				}
				>a{
					display: block;
					width: 12vw;
					margin: 0 auto;
					font-size: 1vw;
					font-weight: normal;
					letter-spacing: 0vw;
					color: white;
					text-align: center;
					padding-top: 0.5vw;
					padding-bottom: 0.5vw;
					border: 1px solid white;
					transition: background-color .5s;
				}
				a:hover{
					background-color: #d576ba;
					border-color: #d576ba;
				}
			}
		}
		
		.center{
			
			.title{
				display: flex;
				width: 45vw;
				margin-left: 25vw;
				justify-content: space-between;
				align-items: center;
				padding-top: 20vw;
				a{
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: #000000;
					transition: all .5s;
					border-bottom: 1px solid #fff;
				}
				a:hover{
					cursor: pointer;
					transition: all 3s;
					border-bottom: 1px solid #000000;
				}
				.line{
					width: 3vw;
					height: 0;
					border-bottom: 1px solid red;
				}
				.line:last-child{
					display: none;
				}
				
			}
			.content{
				width: 65vw;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-top: 4vw;
				padding-bottom: 2vw;
				margin: 0 auto;
				.product1{
					.box{
						display: block;
						width: 43vw;
						height: 27vw;
						overflow: hidden;
						border: none;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
					
				}
				
				.product2{
					.box{
						display: block;
						width: 21vw;
						height: 27vw;
						overflow: hidden;
						border: none;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
					
				}
				
				.product3{
					padding-top: 2vw;
					.box{
						display: block;
						width: 23vw;
						height: 27vw;
						overflow: hidden;
						border: none;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
					
				}
				
				.product4{
					padding-top: 2vw;
					.box{
						display: block;
						width: 40vw;
						height: 27vw;
						overflow: hidden;
						border: none;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
				}
			}
			.btn{
				display: block;
				width: 15vw;
				margin: 0 auto;
				text-align: center;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
				border: 1px solid #000000;
				padding-top: 0.5vw;
				padding-bottom: 0.5vw;
				transition: background-color .5s;
			}
			.btn:hover{
				background-color: #d576ba;
				border-color: #d576ba;
			}
		}
		
		.bottom{
			width: 100%;
			height: 50vw;
			margin-top: 5vw;
			background-image: url(../images/productbg.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
}

@media screen and (max-width:767px) {
	.web{
		main{
			padding-top: 1vw;
			
			
			.top{
				.imgBox{
					width: 90vw;
					height: 45vw;
				}
				
				
				.conTop{
					width: 100%;
					margin-top: -30vw;
					h2{
						font-size: 8vw;
						width: 50vw;
						margin: 0 auto;
					}
					a{
						width: 20vw;
						border: none;
						border-bottom: 1px solid white;
					}
				}
			}
		
			.center{
				padding-top: 3vw;
				.title{
					margin-left: 0;
					margin: 0 auto;
					flex-direction: column;
					padding-top: 13vw;
					height: 48vw;
					a{
						
					}
					a:hover{
						border: none;
						cursor: pointer;
					}
					
					.line{
						width: 5vw;
					}
					.line:last-child{
						display: block;
					}
				}
				.content{
					display: block;
					.product1{
						
						.box{
							margin: 0 auto;
							// transform: scale(1.3);
							width: 50vw;
						}
						h4{
							
						}
					}
					.product2{
						display: inline-block;
						padding-left: 7.5vw;
						.box{
							
							
							img{
								
							}
						}
						h4{
							
						}
					}
					.product3{
						
						display: inline-block;
						.box{
							text-align: center;
							padding-left: 2.2vw;
						}
						h4{
							
						}
					}
					.product4{
						.box{
							margin: 0 auto;
							width: 50vw;
						}
						h4{
							
						}
					}
					
				}
				.btn{
					width: 35vw;
				}
			}
			
			
			
		}
	}
}